<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面(Vue版本)</title>
</head>
<body>

<div id="app">

      <div class="login-box">

           <div>
                用户名:<input v-model="user.username">
           </div>

          <div>
              密码:<input v-model="user.password">
          </div>

          <div>
               <button @click="btnLoginClick">登录</button>
          </div>

      </div>
</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>

<script>

    const app = {
        data() {
            return {
                user: {
                    username: '',
                    password: '',
                    isSuccess:false,
                    success:true
                }
            }
        },
        methods:{
             btnLoginClick(){

                 axios({
                     // url:'http://localhost:8080/login.do',
                       url:'http://localhost:8080/user/login',
                      method:'post',
                      dataType:'json',
                      params:this.user
                 }).then((res)=>{

                     if(res.data.success){
                         window.location.href="/index.html";
                     }else {
                          alert("用户名或者密码错误！")
                     }
                 })

             }
        }
    }


    Vue.createApp(app).mount('#app');
</script>


</html>